const webpack = require('webpack');
const opn = require('opn');
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let config = {
    mode: 'development',
    entry: {
        'index': './app/index.js'
    },
    resolve: {
        extensions: [".js", ".jsx", ".json", ".css", ".pcss", "less"]
    },
    output: {
        path: __dirname + "../dev",
        filename: 'js/[name].js',
        chunkFilename: "js/[name].js",
        publicPath: ''
    },
    optimization: {
        runtimeChunk: {
            name: "manifest"
        },
        splitChunks: {
            cacheGroups: {
                common: {
                    chunks: "initial",
                    name: "common",
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    plugins: [
       new ExtractTextPlugin('css/[name].[md5:contenthash:hex:8].css'),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: "index" + '.html',
            template: 'index.html',
            inject: true,
            title: "index",
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunks: ['manifest', 'vendor', 'common', 'index'],
            hash: true,
            chunksSortMode: 'dependency'
        })
    ],
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                enforce: 'pre',
                use: [
                    'cache-loader',
                    'babel-loader',
                    'eslint-loader',
                ],
                include: [
                    path.resolve(__dirname, "../app"),
                    path.resolve(__dirname, "../store")
                ],
                exclude: [
                    path.resolve(__dirname, "../node_modules")
                ],
            },
            {
                test: /\.(css)$/,
                use: ExtractTextPlugin.extract({
                    fallback: {
                        loader: "style-loader"
                    },
                    use: [{
                        loader: "css-loader"
                    }]
                })
            },
            {
                test: /\.less$/,
                loaders: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
                loader: ['file-loader']
            }
        ]
    },
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        hot: true,
        inline: true,
        historyApiFallback: true,
        disableHostCheck: true
    }
};
module.exports = config;